<template>
	<view style="min-height: 100vh;background-color: #DAFFF7;">
		<dev-navbar title="家人互联"></dev-navbar>
		<view class="family-connectivity-box"></view>
		<view class="content-information">
			<view class="card-information">
				<view class="introduction-title">
					家人互联介绍
				</view>
				<view class="split-content">
					<view class="semicircle-l"></view>
					<dev-split-line width="620" bgColor="#7AE7CF" mode="dashed"></dev-split-line>
					<view class="semicircle-r"></view>
				</view>

				<view class="introduction-to-interconnection">
					家人互联是慧智康平台推出的亲情关怀功能，您可以点击本页面，分享到家人或朋友的微信，家人或朋友点击分享海报，进入慧智康平台。您可以在“我的家人”界面管理和了解家人或朋友健康情况，及时提醒和关爱家人或朋友。
				</view>
			</view>

			<dev-button width="656" height="90" radius="45" fontSize="34" top="72" bottom="50" left="17"
				@tap="addFream">添加家人
			</dev-button>

		</view>
		<u-popup v-model="addFamily" mode="center" border-radius="14">
			<view class="popuphide" @click="closeFamily">
			</view>
			<view class="popupContent" v-if="popupindex==1">
				<view class="family-title">
					添加家人
				</view>
				<view class="family-content">
					时刻关心家人的身体健康变化
				</view>
				<view class="exercise">
					<block v-for="(item,idx) in familyList" :key="idx">
						<view class="every-box" @tap.stop="familytap(item,idx)">
							<image class="family-image" :class="familyindex==idx?'imageActave':''" :src="item.image">
							</image>
							<view class="family-name">
								{{item.name}}
							</view>
						</view>
					</block>
					<view class="zhan">
					</view>
				</view>
				<input v-show="familyindex ==5" class="family-custom" type="text" v-model="relationship"
					@blur="relationshipT" placeholder="请输入亲友称呼" />
				<button class="relevance-btn" type="default" :class="disabledShare?'disabledbg':''"
					:disabled="disabledShare" @click="addFamily=false" open-type="share" title="分享">微信邀请关联</button>
			</view>
		</u-popup>
	</view>

</template>

<script>

import uPopup from "@/uview-ui/components/u-popup/u-popup.vue"

	export default {
		components: {
			uPopup,
		},
		data() {
			return {
				popupindex: 1,
				addFamily: false,
				relationship: '',
				disabledShare: false,
				familyindex: 0,
				familyList: [{
						image: 'https://bsyjk-pic.bsyjk.cn/fatherImage/419D40B313EC4FB7A56F45C839279507.png',
						name: '父亲'
					},
					{
						image: 'https://bsyjk-pic.bsyjk.cn/motherImage/110DD0CAB962479A992679793A5818CC.png',
						name: '母亲'
					},
					{
						image: 'https://bsyjk-pic.bsyjk.cn/partnerImage/D5363339740B43A4B7855A6104E3B8B0.png',
						name: '伴侣'
					},
					{
						image: 'https://bsyjk-pic.bsyjk.cn/girlImage/72CE9F1F273D42B9834D93CFE37FF843.png',
						name: '女儿'
					},
					{
						image: 'https://bsyjk-pic.bsyjk.cn/sonImage/0BAC659F61A442428E005326C7AA4A06.png',
						name: '儿子'
					},
					{
						image: 'https://bsyjk-pic.bsyjk.cn/customImage/7881F937917C4299B6BE3B4A835E4E51.png',
						name: '自定义'
					}
				],
			};
		},
		onLoad() {
			wx.showShareMenu({
				withShareTicket: true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ["shareAppMessage", "shareTimeline"]
			})
		},
		methods: {
			addFream() {
				this.addFamily = true;
			},
			//发送给朋友
			onShareAppMessage(res) {
				// 此处的distSource为分享者的部分信息，需要传递给其他人
				if (res.from === 'button') {
					// 来自页面内转发按钮
					let userInfoKey = global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z';

					let distSource = uni.getStorageSync('distSource');
					console.log('anotherUserId', uni.getStorageSync(userInfoKey).userId,
						'anotherUserName', uni.getStorageSync(userInfoKey).nickName,
						'code', uni.getStorageSync('InvitationCode'),
						'avatarUrl', uni.getStorageSync(userInfoKey).avatarUrl)
					if (distSource == 'InviteYourFamily') {
						let userInfoKey = global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z';

						return {
							title: '百岁园健康',
							type: 0,
							path: '/pagesMy/my/interconnect/interconnect?anotherUserId=' + uni.getStorageSync(
									userInfoKey).userId +
								'&anotherUserName=' + uni.getStorageSync(userInfoKey).nickName +
								'&code=' + uni.getStorageSync('InvitationCode') +
								'&avatarUrl=' + uni.getStorageSync(userInfoKey).avatarUrl,
							summary: "为了让你更健康，我想邀请你关联家人健康，让我每天为你守护",
							imageUrl: "http://static.bsyjk.cn/userfamliy/44C47DC8BE68496EB2F113A5A8F7EBD6.jpeg"
						}
					}
				}
			},
			// 切换获取code
			familytap(item, idx) {
				if (item.name == '自定义' && idx == 5) {
					this.familyindex = idx;
					this.disabledShare = true
				} else {
					this.familyindex = idx;
					let userInfoKey = global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z';

					let fdata = {
							relationName: item.name,
							userId: uni.getStorageSync(userInfoKey).userId
						},
						_this = this;
					this.$api.post(global.apiUrls.shareWeiXin, fdata).then(res => {
						if (res.data.code == 1000) {
							uni.setStorageSync('InvitationCode', res.data.result)
							uni.setStorageSync('distSource', 'InviteYourFamily');
							_this.disabledShare = false
							// this.relationship = '';
						} else {
							_this.disabledShare = true
						}
					}).catch(err => {})
				}
			},
			relationshipT(e) {
				let value = e.target.value
				this.familytap({
					name: value
				}, 5)
			},
			closeFamily() {
				this.addFamily = false;
				relationship = '';
			}
		}
	}
</script>

<style lang="scss">
	.popuphide {
		width: 78upx;
		height: 78upx;
		position: relative;
		left: 580upx;
		margin: 120upx 0 30upx 0;
		background: url(https://bsyjk-pic.bsyjk.cn/hideImage/567C9D30D6A64C72939CB0CBE51E4D84.png)no-repeat;
		background-size: 78upx 78upx;
	}

	.family-custom {
		width: 579upx;
		height: 82upx;
		background: #F5F5F5;
		border-radius: 34upx;
		margin: 55upx 0 -30upx;
		text-align: left;
		font-size: 24upx;
		font-weight: 400;
		color: #BFBEC3;
		line-height: 82upx;
		padding: 0 30upx;
		box-sizing: border-box;
	}

	.relevance-btn {
		width: 600upx;
		height: 90upx;
		background: url(https://bsyjk-pic.bsyjk.cn/toprbg/10099E8526734AC383D6ADEED897F016.png)no-repeat;
		background-size: 750upx 375upx;
		// background: linear-gradient(112deg, #81C042 0%, #2EA7E0 100%);
		border-radius: 45upx;
		font-size: 34upx;
		font-weight: 400;
		color: #FFFFFF !important;
		line-height: 90upx;
		padding: 0;
		margin-top: 72upx;
	}

	.exercise {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.every-box {
			width: 170upx;
			height: 210upx;
			// background-color: #007AFF;
			margin-top: 40upx;

			.family-image {
				width: 130upx;
				height: 130upx;
				border-radius: 50%;
				// background-color: pink;
			}

			.imageActave {
				border: 4upx solid #F56767;
			}

			.family-name {
				font-size: 36upx;
				font-weight: 800;
				color: #333333;
				line-height: 50upx;
			}
		}

		.zhan {
			width: 30%;
		}
	}

	.popupContent {
		width: 700upx;
		background: #FFFFFF;
		padding: 48upx 50upx 64upx;
		box-sizing: border-box;
		text-align: center;
		position: relative;
		border-radius: 20upx;

		.family-title {
			font-size: 38upx;
			font-weight: 400;
			color: #000000;
			line-height: 36upx;
		}

		.family-content {
			font-size: 28upx;
			font-weight: 400;
			color: #FF333A;
			line-height: 36upx;
			padding-top: 30upx;
		}
	}

	.family-connectivity-box {
		width: 750rpx;
		height: 934rpx;
		background-image: url('http://static.bsyjk.cn/shoppingMall/08E9015762A3469BAF4EA9ADA9E93AA1.png');
		background-size: 100% 100%;
	}

	.content-information {
		margin-top: -320rpx;
		padding: 1rpx 30rpx;

		.card-information {
			width: 690rpx;
			height: 390rpx;
			background-color: #fff;
			border-radius: 30rpx;
			overflow: hidden;

			.introduction-title {
				text-align: center;
				font-size: 38rpx;
				font-weight: 600;
				color: #07AD9C;
				margin-top: 20rpx;
			}

			.split-content {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.semicircle-l {
					margin-left: -30rpx;
					width: 60rpx;
					height: 60rpx;
					border-radius: 30rpx;
					background-color: #DAFFF7;
				}

				.semicircle-r {
					margin-right: -30rpx;
					width: 60rpx;
					height: 60rpx;
					border-radius: 30rpx;
					background-color: #DAFFF7;
				}
			}

			.introduction-to-interconnection {
				width: 600rpx;
				padding: 20rpx 30rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #07AD9C;
				line-height: 33rpx;
				background: #DAFFF7;
				border-radius: 21rpx;
				margin-left: 46rpx;
				margin-top: 20rpx;
			}
		}
	}
</style>
